<template>
  <div class="details">
    <div class="detail-nav"><childen-det-nav-bar ref="navbar" @btnclick='clicktitle'/></div>
    <scroll class="content"
            ref="scroll"
            :probe-type='3' 
            @scroll='currtscroll1' >
    <details-swiper :topImages='topImages' class="etails-swiper" />
    <childen-base-info :goods='goods'/>
    <childen-shop-info :shopinfo='shopinfo'/>
    <childen-detail-info :detailinfo='detailinfo' @imgload='imgload'/>
    <childen-size-parmas :itemparmas='itemparmas' ref="parmas"/>
    <childen-comment :comment='comment' ref="comment" />
    <childen-recommend  :showitem='showitem' ref="recommend"/>  
    </scroll>
    <scroll-top class="showscroll" @click.native="scrolltop" v-show="isscrolltop" />
    <ChildenBottomBar @addcarts='addcarts' />
    <totast />
  </div>
</template>

<script>
import {detail,recommend,Goods,Shop,Itemparams,Comment} from 'network/detail'
import {debouce} from 'common/untils.js'

import ChildenDetNavBar from './childenDetails/childenDetNavBar'
import DetailsSwiper from './childenDetails/detailsswiper'
import ChildenBaseInfo from './childenDetails/childenBaseInfo'
import ChildenShopInfo from './childenDetails/childenshopinfo'
import ChildenDetailInfo from './childenDetails/childendetailinfo'
import ChildenSizeParmas from './childenDetails/childensizeparmas'
import ChildenComment from './childenDetails/childencomment'
import ChildenRecommend from './childenDetails/childenrecommend'
import ChildenBottomBar from './childenDetails/childenbottombar'
import totast  from 'components/common/toast/toast'
import ScrollTop from 'components/content/scrolltop/scrolltop'
import Scroll  from 'components/common/scroll/scroll'



export default {
  name:'Details',
  data () {
    return {
      iid:null,
      isscrolltop:false,
      topImages:[],
      goods:{},
      shopinfo:{},
      detailinfo:{},
      itemparmas:{},
      comment:{},
      showitem:[],
      topscrollY:[],
      gettopscrollY:null
   
    }
  },
  components: {
    ChildenDetNavBar,
    DetailsSwiper,
    ChildenBaseInfo,
    ChildenShopInfo,
    ChildenDetailInfo,
    ChildenSizeParmas,
    ChildenComment,
    ChildenRecommend,
    Scroll,
    ChildenBottomBar,
    ScrollTop,
    totast,
    
  },
  created () {
    // console.log(this.$route.query.iid)
    this.iid= this.$route.query.iid
    detail(this.iid).then(res=>{
     console.log(res)
     const data=res.result
      this.topImages=data.itemInfo.topImages

      //获取商品信息
      const goods=new Goods(data.itemInfo,data.columns,data.shopInfo)
      this.goods=goods

      //创建店铺信息对象
      const shopInfo=new Shop(data.shopInfo)
      this.shopinfo=shopInfo
      //获取店铺的信息
      this.detailinfo=data.detailInfo
      //获取店铺尺码
      this.itemparmas=new Itemparams(data.itemParams)
      //获取评论和推荐
      this.comment=new Comment(data.rate,data.skuInfo)
    }) 
    recommend().then(res=>{
      // console.log(res.data.list)
      this.showitem=res.data.list
    }),
    this.gettopscrollY= debouce(()=>{
      this.$nextTick(()=>{
         this.topscrollY=[]
         this.topscrollY.push(0)
          this.topscrollY.push(this.$refs.parmas.$el.offsetTop-44)
          this.topscrollY.push(this.$refs.comment.$el.offsetTop-44)
          this.topscrollY.push(this.$refs.recommend.$el.offsetTop-44)
          this.topscrollY.push(Number.MAX_VALUE)
          // console.log(this.topscrollY)
      
      })
    },50)
  
  },

  methods:{
    imgload(){
     this.$refs.scroll.refresh()
     this.gettopscrollY()
    },
   currtscroll1(position){
    // console.log(position)
    this.isscrolltop=Math.abs(position.y) > 1000
    const  positivenum=-position.y
    // console.log(positivenum)
    //[0, 6362, 7492, 7748]
    //  if(positivenum>this.topscrollY[0] && positivenum<this.topscrollY[1]){
    //   this.$refs.navbar.currtindex=0
    //  }else if(positivenum>this.topscrollY[1] && positivenum<this.topscrollY[2]){
    //   this.$refs.navbar.currtindex=1
    //  }else if(positivenum>this.topscrollY[2] && positivenum<this.topscrollY[3]){
    //   this.$refs.navbar.currtindex=2
    //  }else{
    //    this.$refs.navbar.currtindex=3
    //  }
    let length=this.topscrollY.length
    for(let i=0;i<length-1;i++){
      if(positivenum >= this.topscrollY[i] && positivenum <=this.topscrollY[i+1]){
        this.$refs.navbar.currtindex=i
      }
    }
  },
  scrolltop(){
   
     this.$refs.scroll.scrolltop(0,0,300)
  },
  clicktitle(index){
    //  console.log(this.topscrollY[index])
    this.$refs.scroll.scrolltop(0,-this.topscrollY[index],300)
  },
  addcarts(){
    const shopObj = {}
    shopObj.img=this.topImages[0]
    shopObj.title=this.goods.title
    shopObj.desc=this.goods.desc
    shopObj.lowNowPrice=this.goods.lowNowPrice
    shopObj.iid=this.iid
    //  this.$store.state.addcatslist.push(shopObj)
    this.$store.dispatch('addcats',shopObj).then(res=>{
      this.$toast.show(res,2000)  
     
    })
  
  }
  }

}
</script>

<style scoped>
  .details{
  position: relative;
  z-index: 1;
  height: 100vh;
  background-color: #fff;
  }
 .content{
   height: calc(100% - 93px); 
 }

 .showscroll{
   position: fixed;
   right: 10px;
   top: 700px;
   z-index: 9;
 }
 .detail-nav{
   background-color: #fff;
 }

</style>  